/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  TouchableOpacity,
  Image,
  View
} from 'react-native';

export default class Head extends Component {
  constructor(props) {
    super(props);
  }
  
  render() {
    let  left, right;
    if(this.props.displayLeft === true){

        left = <TouchableOpacity onPress={this.props._onLeftPress.bind(this)}>
            <Image
                style={styles.iconLeft}
                source={this.props.leftIcon ? this.props.leftIcon : require('../images/left.png') }
            />
        </TouchableOpacity>
    }else{
        left = <View style={styles.iconSpace}></View>
    }

    if(this.props.displayRight === true){
        right = <TouchableOpacity onPress={this.props._onRightPress.bind(this)}>
            <Image
                style={styles.iconRight}
                source={this.props.rightIcon ? this.props.rightIcon : require('../images/right.png')}
            />
        </TouchableOpacity>
    }else{
        right = <View style={styles.iconSpace}></View>
    }
    return (
        <View style={styles.container} >
            {left}

            <Text style={styles.headTitle}>{this.props.title}</Text>

            {right}
        </View>
    );
  }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'space-between',
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#12b7f5',
        paddingLeft: 10,
        paddingRight: 10,
        height: 60,
        paddingTop: 20
    },
    headTitle: {
        color: "#fff",
        fontSize: 18
    },
    iconLeft: {
        width: 25,
        height: 25
    },
    iconRight: {
        width: 25,
        height: 25
    },
    iconSpace: {
        width: 25,
        height: 25
    }
});
